<template>
  <div class="container">
    <div id="cesium-container"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },
  methods: {
    initCesium () {
      // 定义地形提供程序
      // const terrainProvider = new Cesium.CesiumTerrainProvider({
      //   // url: 'http://10.1.1.148:8093/mapserver/terrain/temp_1695283744588', // 使用Cesium默认地形提供程序的URL
      //   url: 'http://127.0.0.1:9083/China_DEM_30m'
      // });
      this.viewer = new Cesium.Viewer('cesium-container', {
        // terrainProvider: terrainProvider,
        contextOptions: {
          webgl: {
            alpha: true,
            depth: true,
            stencil: true,
            antialias: true
          },
        },
        selectionIndicator: false,
        useBrowserRecommendedResolution: true,
        imageryProvider: false,
        shouldAnimate: true,
        animation: false, // 禁用动画按钮
        timeline: false, // 禁用时间线按钮
        baseLayerPicker: false, // 禁用底图选择按钮
        geocoder: false, // 禁用地理编码器按钮
        homeButton: false, // 禁用回到初始视图按钮
        infoBox: false, // 禁用信息框按钮
        sceneModePicker: false, // 禁用场景模式选择按钮
        selectionIndicator: false, // 禁用选中指示器按钮
        navigationHelpButton: false, // 禁用导航帮助按钮
        fullscreenButton: false, // 禁用全屏按钮
      })
      this.scene = this.viewer.scene;
      this.viewer.scene.primitives.destroyPrimitives = false;
      this.viewer.scene.globe.depthTestAgainstTerrain = false;
      // 隐藏版权信息
      this.viewer.bottomContainer.style.display = 'none'
      this.Global.viewer = this.viewer
      this.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(109.73269981263729, 37.72537680490404, 7322326.984885184),
        orientation: {
          heading: Cesium.Math.toRadians(341.4422320952118),
          pitch: Cesium.Math.toRadians(-89.70339229203364),
          roll: Cesium.Math.toRadians(0),
        }
      })
      // 初始化
      var handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);
      handler.setInputAction((movement) => {
        var pickedObject = this.scene.pick(movement.position);

        var cartesian;
        if (!pickedObject) {
          if (this.scene.globe.depthTestAgainstTerrain) {
            cartesian = this.scene.pickPosition(movement.position);
          } else {
            //如果没开启深度检测
            var pickRay = this.scene.camera.getPickRay(movement.position);
            cartesian = this.scene.globe.pick(pickRay, this.scene);
          }
        } else {
          cartesian = this.viewer.scene.pickPosition(movement.position);
        }

        var ellipsoid = this.viewer.scene.globe.ellipsoid;
        var cartographic = ellipsoid.cartesianToCartographic(cartesian);
        var lat = Cesium.Math.toDegrees(cartographic.latitude);
        var lng = Cesium.Math.toDegrees(cartographic.longitude);
        var height = cartographic.height;
        console.log(lng + "," + lat + "," + height);
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      //加载天地图影像图层
      this.imageLayer = new Cesium.ImageryLayer(
        new Cesium.WebMapTileServiceImageryProvider({
          show: true,
          url: window.imageUrl,
          layer: "tdtImg_c",
          style: "default",
          format: "tiles",
          tileMatrixSetID: "c",
          subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
          tilingScheme: new Cesium.GeographicTilingScheme(),
          tileMatrixLabels: [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
          ],
          maximumLevel: 17,
        })
      );
      this.viewer.imageryLayers.add(this.imageLayer);
    },
  },
  created () { },
  mounted () {
    this.viewer = null
    this.imageLayer = null
    this.initCesium()
  },
  beforeDestroy () {
    if (this.viewer) {
      this.viewer.destroy();
      this.viewer = null
      this.Global.viewer = null
    }
  },
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;

  #cesium-container {
    width: 100%;
    height: 100%;
    position: absolute;
    zoom: var(--scale);
  }
}
</style>